<template>
    <div class="container">
        <div class="row">
            <div class="col-3">
                <div class="card" style="margin-top: 20px;">
                    <div class="card-body">
                        <img :src="$store.state.user.photo" alt="" style="width: 100%;">
                        暂时不支持上传头像.
                    </div>
                </div>
            </div>
            <div class="col-9">
                <div class="card" style="margin-top: 20px;">
                    <div class="card-body">
                           <span style="font-size: 30px;">我的Bot</span>                                                      <!-- 此处标签连接modal-->
                            <button @click="create_bot_start()" type="button" class="btn btn-info float-end" style="color: blue; font-size: 20px;"  data-bs-toggle="modal" data-bs-target="#add-bot">
                                创建新的Bot
                            </button>
                        
                    </div>
                    <hr>
                    <div class="card-body">
                        <table class="table table-striped table-hover">
                            <thead>
                                <tr>
                                    <th>名称</th>
                                    <th>创建时间</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="bot in bots" :key="bot.id">
                                    <td>{{ bot.title }}</td>
                                    <td>{{ bot.createTime }}</td>
                                    <td>
                                        <button @click="save_bot_update(bot)" type="button" class="btn btn-info" style="margin-right: 20px;"  data-bs-toggle="modal" :data-bs-target="'#show-update-' + bot.id">
                                            查看详情
                                        </button>
                                        <!-- Modal 查看bot或修改bot    需要传入bot，只好放入循环中-->
                                        <div class="modal fade modal-xl" :id="'show-update-' + bot.id" tabindex="-1" data-bs-backdrop="static">
                                            <div class="modal-dialog">
                                                <div class="modal-content">
                                                <div class="modal-header">
                                                    <h1 class="modal-title fs-5">Bot{{ bot.id }}</h1>
                                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" @click="refresh_bots()"></button>
                                                </div>
                                                <div class="modal-body">
                                                    <div class="mb-3">
                                                        <label for="show-update-bot-title" class="form-label">名称</label>
                                                        <input v-model="botadd.title" type="email" class="form-control" placeholder="请输入Bot名称">
                                                    </div>
                                                    <div class="mb-3">
                                                        <label for="show-update-bot-description" class="form-label">写简介</label>
                                                        <textarea v-model="botadd.description" class="form-control" rows="3"  placeholder="请输入简介"></textarea>
                                                    </div>
                                                    <div class="mb-3">
                                                        <label for="show-update-bot-code" class="form-label">你的代码</label>
                                                        <VAceEditor v-model:value="botadd.content" lang="c_cpp"
                                                            theme="textmate" style="height: 300px" :options="{
                                                                enableBasicAutocompletion: true, //启用基本自动完成
                                                                enableSnippets: true, // 启用代码段
                                                                enableLiveAutocompletion: true, // 启用实时自动完成
                                                                fontSize: 18, //设置字号
                                                                tabSize: 4, // 标签大小
                                                                showPrintMargin: false, //去除编辑器里的竖线
                                                                highlightActiveLine: true,
                                                            }" />
                                                    </div>
                                                </div>
                                                <div class="modal-footer">
                                                    <div class="error-message" style="color: red; font-size:16px;">{{ bot.error_message }}</div>
                                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" @click="refresh_bots()">
                                                        退出
                                                    </button>
                                                    <button v-if="bot.title !== botadd.title || bot.description !== botadd.description || bot.content !== botadd.content"
                                                     type="button" class="btn btn-primary" @click="update_bot(bot)">
                                                     修改
                                                    </button>
                                                </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!----                             -->
                                        <button type="button" class="btn btn-danger" @click="save_bot(bot)" data-bs-toggle="modal" data-bs-target="#remove-bot">删除</button>
                                    </td>                                               <!--    直接调用模态框，不过通过函数传输bot      -->
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>


    
<!-- Modal 创建BOT-->
<div class="modal fade modal-xl" id="add-bot" tabindex="-1" data-bs-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
        <div class="modal-header">
            <h1 class="modal-title fs-5" id="add-bot-title">创建新的Bot</h1>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            <div class="mb-3">
                <label for="add-bot-title" class="form-label">名称</label>
                <input v-model="botadd.title" type="email" class="form-control" id="add-bot-title" placeholder="请输入Bot名称">
            </div>
            <div class="mb-3">
                <label for="add-bot-description" class="form-label">写简介</label>
                <textarea v-model="botadd.description" class="form-control" id="add-bot-description" rows="3"  placeholder="请输入简介"></textarea>
            </div>
            <div class="mb-3">
                <label for="add-bot-code" class="form-label">你的代码</label>
                <VAceEditor v-model:value="botadd.content" lang="c_cpp"
                    theme="textmate" style="height: 300px" :options="{
                        enableBasicAutocompletion: true, //启用基本自动完成
                        enableSnippets: true, // 启用代码段
                        enableLiveAutocompletion: true, // 启用实时自动完成
                        fontSize: 18, //设置字号
                        tabSize: 4, // 标签大小
                        showPrintMargin: false, //去除编辑器里的竖线
                        highlightActiveLine: true,
                    }" />
            </div>
        </div>
        <div class="modal-footer">
            <div class="error-message" style="color: red; font-size:16px;">{{ botadd.error_message }}</div>
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
            <button type="button" class="btn btn-primary" @click="add_bot">创建</button>
        </div>
        </div>
    </div>
</div>


<!-- Modal 删除bot -->
<div class="modal fade" id="remove-bot" tabindex="-1" data-bs-backdrop="static">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="remove-bot-title" style="color:red ;">删除</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        确认要删除这个bot吗?
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" data-bs-dismiss="modal" @click="remove_bot">确认删除</button>
      </div>
    </div>
  </div>
</div>


</template>
<script>
import $ from 'jquery'
import { ref , reactive} from 'vue';
import { useStore } from 'vuex';
import { Modal} from 'bootstrap/dist/js/bootstrap';

import { VAceEditor } from 'vue3-ace-editor';//ace編輯器
import ace from 'ace-builds';
import 'ace-builds/src-noconflict/mode-c_cpp';
import 'ace-builds/src-noconflict/mode-json';
import 'ace-builds/src-noconflict/theme-chrome';
import 'ace-builds/src-noconflict/ext-language_tools';


export default {
    components:{
        VAceEditor
    },

    setup(){

        ace.config.set(
            "basePath",
            "https://cdn.jsdelivr.net/npm/ace-builds@" +
            require("ace-builds").version +
            "/src-noconflict/")

        const store = useStore();
        let bots = ref([]);
        let temporary_bot = null;// 临时存储要删除的bot的引用

        const botadd = reactive({
            title:"",
            description:"",
            content:"",
            error_message:""
        });

        const refresh_bots = () => {//刷新页面(不刷新网页)
                $.ajax({
                    url: "https://app5541.acapp.acwing.com.cn/api/user/bot/getList/",
                    type: "get",
                    headers:{
                        Authorization: "Bearer " + store.state.user.token,
                    },
                    success(resp){
                        bots.value = resp;
                    },
                    error(resp){
                        console.log(resp);
                    }
                })
        }

        const add_bot = () => {
            botadd.error_message = "";
            $.ajax({
                url: "https://app5541.acapp.acwing.com.cn/api/user/bot/add/",
                type: "post",
                data:{
                    title: botadd.title,
                    description: botadd.description,
                    content:botadd.content
                },
                headers:{
                        Authorization: "Bearer " + store.state.user.token,
                },
                success(resp){
                    if(resp.error_message === "success"){
                        botadd.title = "";
                        botadd.content = "";
                        botadd.description = "";

                        Modal.getInstance("#add-bot").hide();
                        refresh_bots();
                        
                    }else{
                        botadd.error_message = resp.error_message;
                    }
                }

            })
        }
        const update_bot = (bot) => {
            bot.error_message = "";
            $.ajax({
                url: "https://app5541.acapp.acwing.com.cn/api/user/bot/update/",
                type: "post",
                data:{
                    bot_id:bot.id,
                    title: botadd.title,
                    description: botadd.description,
                    content:botadd.content
                },
                headers:{
                        Authorization: "Bearer " + store.state.user.token,
                },
                success(resp){
                    if(resp.error_message === "success"){

                        Modal.getInstance('#show-update-' + bot.id).hide();
                        refresh_bots();
                    }else{
                        bot.error_message = resp.error_message;
                    }
                }
                

            })
        }
        const save_bot  = (bot) =>{//临时存一下bot的数值，为modal的调用做准备.
            temporary_bot = bot
        }
        const save_bot_update = (bot) =>{
            botadd.title = bot.title;
            botadd.description = bot.description;
            botadd.content = bot.content;
        }
        const create_bot_start = () =>{
            botadd.title = "";
            botadd.description = "";
            botadd.content = `
package com.kob.botruningsystem.utils;

import java.io.File;
import java.io.FileNotFoundException;
import java.util.Scanner;

public class Bot implements java.util.function.Supplier<Integer>{
     //请不要修改函数以外的信息，报ce会导致蛇没有输入直接失败
    public Integer nextMove(String input) {//函数会传来地图信息(0代表空，1代表墙(包括蛇身不包括蛇尾)，2代表食物，3代表敌方蛇头，4代表我方蛇头)
                                                 //input大概长这样"[[1,2,3],[1,2,3],[1,2,3]]"
		return 0;//返回0代表往上，1代表下，2代表左，3代表右。请预判三回合（延迟原因）比如至少前方三格都没有障碍物向前才能确保安全，(后续会改成返回数组（一次返回多个操作）)
    }

    @Override //不要修改这个函数，否则会变得不幸
    public Integer get() {
        File file = new File("input.txt");
        try {
            Scanner sc = new Scanner(file);
            return nextMove(sc.next());

        } catch (FileNotFoundException e) {
            throw new RuntimeException(e);
        }

    }
}

            `
        }
        const remove_bot = () =>{//不用传值啦，因为存在全局变量temporary_bot里。
            $.ajax({
                url: "https://app5541.acapp.acwing.com.cn/api/user/bot/remove/",
                type: "post",
                data:{
                    bot_id:temporary_bot.id
                },
                headers:{
                        Authorization: "Bearer " + store.state.user.token,
                },
                success(resp){
                    if(resp.error_message === "success"){
                        refresh_bots();
                        temporary_bot = null;
                    }
                },
                error(){
                    temporary_bot = null;
                }

            })
        }

        refresh_bots();
        return {
            bots,
            botadd,
            refresh_bots,
            add_bot,
            update_bot,
            save_bot,
            save_bot_update,
            remove_bot,
            create_bot_start
        }
        
    }
    
}
</script>

<style scoped>

</style>